<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { computed } from 'vue';


const store = useStore();
const router = useRouter();
const route = useRoute();

store.dispatch('category/updateProductDetail', route.params.id);
const productDetail = computed(() => store.state.category.productDetail);


const price = ref(0);
// 鼠标点击
const onClick = (i) => {
  price.value = i;
};

// 计数器
const num = ref(1);

// 商品同类推荐
store.dispatch('category/updateGoodsRelevant', {
  id: route.params.id,
  limit: 16,
});
const goodsRelevant = computed(() => store.state.category.goodsRelevant);
</script>

<template>
  <div class="content-wrapper">
    <div class="bread-crumbs">
      {{ '这里是面包屑' }}
    </div>
    <!-- 详情 -->
    <div class="content-detail">
      <div class="detail-img">
        <!-- 图片区 -->
        <div class="imgs">
          <!-- 大图 -->
          <!-- <div class="img-big">
            <img :src="productDetail.mainPictures[picture]">
          </div> -->
          <!-- 小图组 -->
          <!-- <div class="imgs-small">
            <img
              v-for="(item, i) in productDetail.mainPictures"
              :key="i"
              :src="item"
              @mouseenter="onMouseEnter(i)"
              :class="{ 'active': picture === i }"
            >
          </div> -->
          <enlarge-images :images="productDetail.mainPictures" />
        </div>
        <!-- 商品销量 人气等 -->
        <div class="detali">
          <div class="datail-sales">
            <div class="datail-title">销量人气</div>
            <div class="datail-num">200+</div>
            <div class="datail-action">
              <icon
                name="Qizhi"
                color="#27ba9b"
                class="datail-icon"
              />
              销量人气
            </div>
          </div>
          <div class="datail-appraise">
            <div class="datail-title">商品评价</div>
            <div class="datail-num">400+</div>
            <div class="datail-action">
              <icon
                name="Pingjia"
                color="#27ba9b"
                class="datail-icon"
              />
              查看评价
            </div>
          </div>
          <div class="datail-collect">
            <div class="datail-title">收藏人气</div>
            <div class="datail-num">600+</div>
            <div class="datail-action">
              <icon
                name="Wujiaoxing"
                color="#27ba9b"
                class="datail-icon"
              />
              收藏商品
            </div>
          </div>
          <div class="datail-brand">
            <div class="datail-title">品牌信息</div>
            <div class="datail-num">苏宁电器</div>
            <div class="datail-action">
              <icon
                name="Pingpai"
                color="#27ba9b"
                class="datail-icon"
              />
              品牌主页
            </div>
          </div>
        </div>
      </div>
      <div class="detail-info">
        <h3>{{ productDetail.name }}</h3>
        <p class="info-desc"> {{ productDetail.desc }} </p>
        <p class="info-price">
          <span class="RMB">￥</span>
          <span class="price">{{ productDetail.skus[price].price }}</span>
          <span class="old-RMB">￥</span>
          <span class="old-price">{{ productDetail.skus[price].oldPrice }}</span>
        </p>
        <div class="service">
          <!-- 促销 -->
          <p class="service-info">
            <span class="info-title">促销</span>
            <span>12月好物放送， App领劵购买直降120元</span>
          </p>
          <!-- 配送 -->
          <p class="service-info">
            <span class="info-title">配送</span>
            <span>至</span>
          </p>
          <!-- 服务 -->
          <p class="service-info">
            <span class="info-title">服务</span>
            <span class="info-service">无忧退货</span>
            <span class="info-service">快速退款</span>
            <span class="info-service">免费包邮</span>
            <span class="info-service">了解详情</span>
          </p>
        </div>
        <!-- 规格 -->
        <div
          v-for="(item, i) in productDetail.specs"
          :key="i"
          class="info-size"
        >
          <div class="size-title">
            {{ item.name }}
          </div>
          <div class="size-imgs">
            <img
              v-for="(p, i) in item.values"
              :key="i"
              :src="p.picture"
              @click="onClick(i)"
            >
          </div>
        </div>
        <!-- 数量 -->
        <div class="info-size info-number">
          <div class="size-title">
            数量
          </div>
          <div class="size-counter">
            <el-input-number v-model="num" :min="1" :max="9999999999"/>
          </div>
        </div>
        <el-button
          class="join-shoppingCart"
          type="success"
        >
          加入购物车
        </el-button>
      </div>
    </div>
    <!-- 同类商品推荐 -->
    <div class="like-product">
      <!-- 标题 -->
      <div class="like-title">
        <icon name="Lingxing" color="#bcf1e6" class="lingxing"/>
        <icon name="Righttwo" color="#27ba9b" class="right"/>
        <span>同类商品推荐</span>
      </div>
      <!-- 轮播图 -->
      <el-carousel indicator-position="outside" class="outside" arrow="always">
        <el-carousel-item v-for="(item, i) in Math.ceil(goodsRelevant.length / 4)" :key="item" class="outside-item">
          <div v-for="p in goodsRelevant.slice(i * 4, ( i + 1 ) * 4)" :key="p" class="item">
            <div class="img">
              <img :src="p.picture" />
            </div>
            <div class="name">{{ p.name }}</div>
            <div class="price">
              <span class="RMB">￥</span>
              <span class="price-num">{{ p.price }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.content-wrapper {
  width: 1240px;
  height: 100%;
  margin: 0 auto;
  // 面包屑
  .bread-crumbs {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    margin-top: 20px;
  }
  // 详情
  .content-detail {
    width: 100%;
    height: 600px;
    margin-top: 20px;
    background-color: #fff;
    display: flex;
    // 详情左边图片
    .detail-img {
      flex: 1;
      height: 100%;
      padding: 30px 50px;
      display: flex;
      flex-direction: column;
      .imgs {
        width: 100%;
        flex: 1;
        // display: flex;
        // .img-big {
        //   width: 400px;
        //   height: 400px;
        //   img {
        //     width: 100%;
        //     height: 100%;
        //     background-color: #f5f5f5;
        //   }
        // }
        // .imgs-small {
        //   flex: 1;
        //   height: 100%;
        //   display: flex;
        //   flex-direction: column;
        //   justify-content: space-between;
        //   align-items: flex-end;
        //   img {
        //     width: 68px;
        //     height: 68px;
        //   }
        //   .active {
        //     cursor: pointer;
        //     border: 2px solid $green;
        //   }
        // }
      }
      .detali {
        width: 100%;
        height: 140px;
        display: flex;
        align-items: center;
        .datail-sales,
        .datail-appraise,
        .datail-collect,
        .datail-brand {
          width: 100px;
          height: 100px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          border-right: 1px solid #e4e4e4;
          &:last-child {
            border-right: none;
          }

          .datail-title {
            font-size: 14px;
            color: #999;
            user-select: none;
          }
          .datail-num {
            font-size: 14px;
            color: $red;
            user-select: none;
          }
          .datail-action {
            font-size: 14px;
            display: flex;
            align-items: center;
            user-select: none;
            &:hover {
              color: $green;
              cursor: pointer;
            }
            .datail-icon {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
    // 详情右边文字
    .detail-info {
      width: 660px;
      height: 100%;
      padding: 30px 30px 30px 0;
      h3 {
        font-weight: 400;
        font-size: 22px;
      }
      .info-desc {
        margin: 12px 0;
        color: #999;
        font-size: 14px;
      }
      .info-price {
        color: $red;
        .RMB {
          font-size: 14px;
        }
        .price {
          font-size: 24px;
        }
        .old-RMB {
          margin-left: 10px;
          font-size: 14px;
          color: #999999;
        }
        .old-price {
          font-size: 14px;
          color: #999999;
          text-decoration: line-through;
        }
      }
      .service {
        width: 500px;
        height: 150px;
        background-color: #f5f5f5;
        padding: 12px 10px;
        margin: 12px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          font-size: 14px;
          color: #666;
        }
        .info-title {
          color: #999999;
          margin-right: 30px;
        }
        .info-service {
          margin-right: 12px;

          &:last-child {
            color: $green;
          }
          &:nth-child(-n+4)::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: $green;
            border-radius: 50%;
            margin: 0 4px 3px 0;
          }
        }
      }
      .info-size {
        width: 100%;
        height: 65px;
        display: flex;
        align-items: center;
        .size-title {
          width: 50px;
          height: 65px;
          line-height: 65px;
          color: #999;
          font-size: 14px;
          text-align: center;
        }
        .size-imgs {
          flex: 1;
          height: 65px;
          display: flex;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
            margin-left: 20px;
            outline: 1px solid #e4e4e4;

            &:hover {
              cursor: pointer;
            }
          }
          // .focus {
          //   border: 2px solid $green;
          // }
        }
        .size-counter {
          margin-left: 20px;
        }
      }
      .info-number {
        height: 30px;
        margin: 6px 0 12px;
      }
      .join-shoppingCart {
        width: 180px;
        height: 50px;
        font-size: 16px;
        background-color: $green;
      }
    }
  }
  // 同类商品推荐
  .like-product {
    width: 100%;
    margin-top: 12px;
    height: 460px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .like-title {
      height: 80px;
      display: flex;
      padding: 0 20px;
      align-items: center;
      .lingxing {
        width: 24px;
        height: 24px;
      }
      .right {
        width: 32px;
        height: 32px;
        margin-left: -16px;
      }
      span {
        font-size: 20px;
      }
    }
    .outside {
      width: 100%;
      flex: 1;
      padding-top: 36px;
      position: relative;
      .outside-item {
        display: flex;
        justify-content: space-around;
        .item {
          width: 240px;
          height: 290px;
          display: flex;
          flex-direction: column;
          align-items: center;

          &:hover {
            cursor: pointer;
          }
          .img {
            width: 230px;
            height: 230px;
            padding: 20px;
            img {
              width: 190px;
              height: 190px;
            }
          }
          .name {
            padding: 0 40px;
            font-size: 14px;
            color: #666666;
            margin-bottom: 12px;
            @include overflow(1);
          }
          .price {
            padding: 0 40px;
            color: $red;
          }
        }
      }
    }
    :deep(.el-carousel__button) {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: $green;
    }
    :deep(.el-carousel__arrow--left) {
      width: 50px;
      height: 50px;
      font-size: 30px;
      background-color: transparent;
      color: #ddd;
      top: 120px;
      left: 0;
    }
    :deep(.el-carousel__arrow--right) {
      width: 50px;
      height: 50px;
      font-size: 30px;
      background-color: transparent;
      color: #ddd;
      top: 120px;
      right: 0;
    }
  }
}
</style>
